<!-- <template>
	<view class="city">
		<view class="abc" v-for="item in list" :key="item.type">
			{{item.type}}
		</view>
		<view class="crld dpflex">
			<view class="crld-item" v-for="item1 in item1.children" :key="item1.id">
				{{item1.city_name}}
			</view>
		</view>
	</view>
</template> -->
<template>
	<view class="city">
		<template v-for="item in list">
			<view class="item" :key="item.type" v-if="item.children.length">
				<view class="title">
					{{item.type}}
				</view>
				<view class="content dpflex">
					<view class="citem" @click="changeCityBtn(item1)" v-for="item1 in item.children " :key="item1.id">
						{{item1.city_name}}
					</view>

				</view>
			</view>
		</template>

	</view>
</template>

<script>
	import {
		getCitys
	} from "@/api/home.js"
	  import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				list: []
			};
		},
		created() {
			this.getList()
		},
		methods: {
			...mapMutations(['changeCity']),
			//点击城市回显home页面
			changeCityBtn(item){
				this.changeCity(item.city_name)
				//返回上一级
				uni.navigateBack()
			},
			//获取城市数据
			async getList() {
				let res = await getCitys()
				// console.log(res);
				//组装一个 有 字母和 children 对象组成的数据
				let arr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').map(item => ({
					type: item,
					children: []
				}))
				res.forEach(item=>{
					// console.log(item);
					arr.forEach(item1=>{
						// console.log(item1);
						if (item.city_pre == item1.type) {
							item1.children.push(item)
						}
						// console.log(item1.children);
					})
				})
				//渲染到页面上.
				// console.log(arr);
				this.list = arr;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.city {
		width: 100%;
		height: 100%;
		background: #f6f6f6;
	}

	.title {
		padding-top: 30rpx;
		height: 60rpx;
		font-size: 40rpx;
		text-indent: 40rpx;
	}

	.content {
		width: 90%;
		margin: 0 auto;
		padding: 20rpx;
		flex-wrap: wrap;
		background: #fff;

		.citem {
			margin: 10rpx;
		}
	}
</style>